<template>
  <div class="home-page">
    <div class="banner-img">
      <nut-swiper
        direction="horizontal"
        :swiperData="dataImgItem"
        :lazyLoad="true"
        :autoPlay="3000"
        :paginationVisible="true"
        ref="demo5"
      >
        <div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide">
          <img
            :data-src="item.imgSrc"
            style="max-width:100%; max-height:100%"
            class="nut-img-lazyload"
          />
        </div>
      </nut-swiper>
    </div>
    <div class="home-title">
      <h3>优惠活动</h3>
      <span>
        更多
        <i class="iconfont makerarrow-right"></i>
      </span>
    </div>
    <div class="hot-sale">
      <ul class="products-list">
        <li
          class="list-item"
          v-for="(item, index) of dataList"
          :key="index"
          @click="handleGoTo(item.link)"
        >
          <img src alt />
          <div>
            <div class="item-title">{{ item.title }}</div>
            <div class="item-content">{{ item.info }}</div>
            <div class="item-price">
              <span class="item-price-new">
                <i class="iconfont makerqian"></i>
                {{ item.price }}
              </span>
              <span v-if="item.oldPrice" class="item-price-old">
                <i class="iconfont makerqian"></i>
                {{ item.price }}
              </span>
            </div>
          </div>
        </li>
      </ul>
      <!-- <nut-infiniteloading
        @loadmore="onInfinite"
        :use-window="true"
        :is-show-mod="true"
        :has-more="isHasMore"
        :is-loading="isLoading"
        :threshold="80"
      >
        
      </nut-infiniteloading>-->
    </div>
  </div>
</template>
<script>
export default {
  name: 'AppHome',
  data() {
    return {
      dataItem: [],
      dataImgItem: [],
      isLoading: false,
      isHasMore: true,
      dataList: [
        {
          img: null,
          title: '影楼级高端相册影楼级高端相册',
          info: '高级相片纸，还原色彩，防水耐磨耐撕，不易变形永不褪色',
          price: '261.00',
          oldPrice: '280.00',
          link: '/photoAlbum',
        },
        {
          img: null,
          title: '轻奢摆台挂框',
          info:
            '室内的一道风景线，软装神器，让家更温馨室内的一道风景线，软装神器，让家更温馨',
          price: '261.00',
          oldPrice: '280.00',
          link: '/photoTable',
        },
        {
          img: null,
          title: '100元抵用券',
          info: '先买券，后购物，支付时可抵用对应金额，让您享受到更多的优惠 ',
          price: '261.00',
          oldPrice: '280.00',
          link: '/center/cardVolume',
        },
      ],
      timer: null,
      page: 1,
    };
  },
  mounted() {
    setTimeout(() => {
      this.dataItem = [
        {
          name: 1,
        },
        {
          name: 2,
        },
        {
          name: 3,
        },
        {
          name: 4,
        },
      ];

      this.dataImgItem = [
        {
          imgSrc:
            '//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg',
        },
        {
          imgSrc:
            '//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg',
        },
        {
          imgSrc:
            '//m.360buyimg.com/mobilecms/s843x843_jfs/t22123/348/720079801/233727/23c4c0a4/5b162d64Nc5883413.jpg',
        },
        {
          imgSrc:
            '//m.360buyimg.com/mobilecms/s843x843_jfs/t1/27233/9/354/82863/5c090a0eEe2a350d8/aaa6686ce133e364.jpg',
        },
      ];
    }, 300);
  },
  methods: {
    // 跳转
    handleGoTo(path) {
      this.$router.push(path);
    },
    onInfinite() {
      console.log('a');
      this.isLoading = true;
      this.timer = setTimeout(() => {
        console.log('this.page=', this.page);
        if (this.page <= 5) {
          this.dataList = this.dataList.concat(this.dataList);
          this.page = this.page + 1;
        } else {
          this.isHasMore = false;
        }
        this.isLoading = false;
      }, 1000);
    },
  },
  destroyed() {
    clearTimeout(this.timer);
  },
};
</script>
<style lang="scss" scoped>
.home-page {
  padding: 0 10px;
  .banner-img {
    width: 100%;
    height: 28vh;
    background-color: pink;
    position: relative;
    margin-top: 10px;
    border-radius: 16px;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;
    .nut-swiper {
      width: 100%;
      height: 100%;
    }
    .nut-swiper-slide {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &::after {
      position: absolute;
      left: 3%;
      width: 94%;
      height: 0.5px;
      bottom: 0px;
      content: '';
      box-shadow: 2px 2px 5px #000;
    }
  }
  .home-title {
    position: relative;
    padding-left: 30px;
    &::after {
      position: absolute;
      top: 15px;
      left: 14px;
      content: '';
      width: 4px;
      height: 18px;
      background-color: #ff911a;
      border-radius: 2px;
    }
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > span {
      font-size: 12px;
      color: #1e1e1e;
      i {
        color: #999;
        font-size: 14px;
      }
    }
  }
  .hot-sale {
    width: 100%;
    // height: 600px;
    overflow: auto;
    border-radius: 16px;
    // background-color: pink;
    .products-list {
      width: 100%;
      height: auto;
      .list-item {
        height: 15.5vh;
        margin-bottom: 10px;
        border-radius: 16px;
        background-color: white;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 14px;
        img {
          width: 12vh;
          height: 12vh;
          box-sizing: border-box;
          border: 1px solid #f2f2f2;
          border-radius: 10px;
        }
        & > div {
          flex: 1;
          height: 12vh;
          // height: 100px;
          overflow: hidden;
          padding-left: 10px;
          .item-title {
            height: 3vh;
            line-height: 3vh;
            color: #1e1e1e;
            font-size: 18px;
            overflow: hidden;
            font-weight: bolder;
            margin-bottom: 1vh;
          }
          .item-price {
            height: 3vh;
            line-height: 3vh;
            font-size: 14px;
            overflow: hidden;
            .item-price-new {
              color: #fd5e4b;
              font-size: 16px;
              font-weight: bolder;
              margin-right: 10px;
            }
            .item-price-old {
              font-size: 14px;
              color: #a9a6a6;
              position: relative;
              &::after {
                position: absolute;
                left: 0%;
                top: 48%;
                width: 100%;
                height: 0.5px;
                content: '';
                background-color: #a9a6a6;
              }
            }
            .iconfont {
              font-size: 14px;
            }
          }
          .item-content {
            color: #a4a4a4;
            overflow: hidden;
            height: 5vh;
            line-height: 2.5vh;
            font-size: 12px;
            margin-bottom: 0.5vh;
          }
        }
      }
    }
  }
}
</style>